<script setup>
const props = defineProps({
  userId: {
    type: Number,
    required: true,
  },
})
console.log(props.userId, '获取关注信息')

const list = ref([])
const tabs = [
  { id: 0, label: '关注的用户' },
  { id: 1, label: '关注者' },
  { id: 2, label: '关注标签' },
]
const activeTab = ref(-1)

function toggleTag(i) {
  console.log('关注跳转', i)
  activeTab.value = i
  switch (activeTab.value) {
    case 0:
      list.value = [
        {
          id: 0,
          avatar:
            'https://p26-passport.byteacctimg.com/img/user-avatar/63f26af99002c2cddfbf75cc2fd9a447~90x90.awebp',
          name: '大脸怪',
          job: '全栈/前端开发工程师 | isme.top',
          isAttention: true,
        },
        {
          id: 2,
          avatar:
            'https://p9-passport.byteacctimg.com/img/user-avatar/8b472f29b528ad097a78d288ef895900~90x90.awebp',
          name: 'why技术',
          job: 'java工程师 @公众号【why技术】',
          isAttention: false,
        },
      ]
      break
    case 1:
      list.value = [
        {
          id: 0,
          avatar:
            'https://p26-passport.byteacctimg.com/img/user-avatar/9f6be7fde7ed8eb4f17ed0af72a916d7~90x90.awebp',
          name: '一个无语的表情',
          job: 'Android 高级工程师',
          isAttention: false,
        },
        {
          id: 2,
          avatar:
            'https://p26-passport.byteacctimg.com/img/user-avatar/f99f09abc14f0b66d5eed867ae928f60~50x50.awebp',
          name: '无限进化',
          job: '',
          isAttention: false,
        },
      ]
      break
    case 2:
      list.value = [
        {
          id: 0,
          avatar:
            'https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/155739392627629404d0ab30a17e06233328025ed5060.jpg~tplv-t2oaga2asx-image.image',
          name: 'Dart',
          isAttention: false,
        },
        {
          id: 2,
          avatar:
            'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e92f418f11a423ca563657e70aa5bcd~tplv-k3u1fbpfcp-watermark.image?',
          name: '源码阅读',
          isAttention: false,
        },
      ]
      break
  }
}

onMounted(() => {
  toggleTag(2)
})

defineExpose({
  // 导出子标签跳转方法
  toggleTag,
})
</script>

<template>
  <div class="min-h-500 px-8">
    <div class="flex justify-between px-8 font-size-14">
      <span class="fw-black"> 关注 </span>
      <div class="op-text">
        <span
          v-for="tab in tabs"
          :key="tab.id"
          class="cursor-pointer line-height-100% us"
          :class="{ 'color-primary': activeTab === tab.id }"
          @click="toggleTag(tab.id)"
        >
          {{ tab.label }}
          <el-divider v-if="tab.id < tabs.length - 1" direction="vertical" />
        </span>
      </div>
    </div>
    <el-divider />
    <div>
      <template v-for="(item, index) in list" :key="index">
        <div class="h-70 flex cursor-pointer items-center p-8">
          <div class="flex flex-1 items-center">
            <el-avatar class="mr-10" :src="item.avatar" />
            <div class="flex-col gap-2">
              <span class="fw-black">{{ item.name }} </span>
              <span class="font-size-14 op-text">{{ item.job }} </span>
            </div>
          </div>
          <div>
            <el-button class="w-100" :type="item.isAttention ? '' : 'primary'">
              {{ item.isAttention ? "已关注" : "关注" }}
            </el-button>
          </div>
        </div>
        <el-divider v-if="index < list.length - 1" />
      </template>
      <el-empty
        v-if="list.length === 0"
        description="这里什么也没有"
        class="us"
      />
    </div>
  </div>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
  opacity: 0.5;
}
</style>
